<template>
  <view class="index">
    <view :class="[hasScroll ? 'bgWhite' : '', 'i-nav']" :style="{ height: statusNavBarHeight + 'px' }">
      <view class="status-bar"> </view>
      <view class="logo" :style="{ position: 'absolute', top: navBarTop + 'px' }">
        <img :src="hasScroll ? logoSrc4 : logoSrc3" alt="万户健康项目" srcset="" />
      </view>
    </view>
    <!-- 背景心形图片 -->
    <view class="i-bg-img"></view>
    <view class="content">
      <view v-if="isLogin" class="info">
        <view
          >已加入<text class="i-white">{{ splitNum(numberData.count) }}</text
          >人,已服务<text class="i-white">{{ splitNum(numberData.insuredCount) }}</text
          >人
        </view>
        <!-- <view>已募集{{ splitNum(sumCoverage) }} 万元</view> -->
      </view>
      <view v-if="isLogin" class="family-card">
        <scroll-view scroll-x="true" scroll-y="false" class="f-scroll-x">
          <view class="f-board">
            <view v-if="relationWithInsurerArr.length" class="f-b-inner">
              <view
                v-for="(item, index) in relationWithInsurerArr"
                :key="index"
                :class="['f-b-imgw', index % 2 === 0 ? 'f-b-imgw-boy' : 'f-b-imgw-girl']"
                @click="goService(item)"
              >
                <img :src="item.src" :alt="item.name" class="f-b-img-header" />
                <!-- <img :src="membersStatus[item.status ? item.status : 0]" class="f-b-img-icon" /> -->
              </view>
              <!-- <view class="f-b-t">已有{{relationWithInsurerArr.length}}位家人加入</view> -->
            </view>
            <view v-else>
              <view class="f-b-t"> 您尚未加入任何服务计划 </view>
            </view>
          </view>
        </scroll-view>
        <view class="f-num"
          >已有 <span class="f-num-bold">{{ servingMemberCount || 0 }}位</span>家庭成员加入万户健康</view
        >
        <!-- <view class="f-des"
          >共获得最高<text class="f-des-bold">{{
            servingMemberCount * 30
          }}</text
          >万保障</view
        > -->
        <view class="f-btn-wrap">
          <view class="f-btn f-btn-orange" @click="checkHadService">
            <view>查看已购服务</view>
          </view>
          <view class="f-btn" @click="helpFamilyJoin">
            <!-- <view v-if="relationWithInsurerArr.length"> 继续加入 </view> -->
            <view>选购服务</view>
          </view>
        </view>
      </view>
      <view v-else class="unLogin" @click="goLogin">
        <view class="img"><img :src="require('@/static/index/unLogin.png')" /></view>
        <view class="name">欢迎加入万户健康服务计划</view>
        <view class="loginBtn"><span>登录/注册</span></view>
      </view>
      <!-- 互助tab页 -->
      <!-- <view class="tab">
        <view
          v-for="(item, index) in tabList"
          :key="index"
          class="tab-item"
          @click="tabClick(item)"
        >
          <view class="tab-item-img">
            <img :src="item.logo" :alt="item.name" />
          </view>
          <view class="tab-item-txt">
            {{ item.name }}
          </view>
        </view>
      </view> -->
      <!-- 领取保障banner 
      <view v-if="familyInsurances.length > 0" class="get-banner">
        <view class="g-b-imgwrap">
          <img
            src="https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/in.png"
            alt="领取保障"
          />
        </view>
        <view class="g-b-txt">
          <view class="g-b-t1">您有{{ familyInsurances.length }}份公益保障待激活</view>
          <view class="g-b-t2">最高可获得30万大病保障</view>
        </view>
        <view class="g-b-btn" @click="toActive">去激活</view>
      </view>

      
      <view v-if="service3d.length > 0" class="get-banner">
        <view class="g-b-imgwrap">
          <img
            src="https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/3d.png"
            alt="领取保障"
          />
        </view>
        <view class="g-b-txt">
          <view class="g-b-t1">您有{{ service3d.length }}份三定送药服务未开通</view>
          <view class="g-b-t2">定时定量 送药到家</view>
        </view>
        <view class="g-b-btn" @click="toOpen3d">去开通</view>
      </view>

      
      <view v-if="sickEsTimate.length > 0" class="get-banner">
        <view class="g-b-imgwrap">
          <img
            src="https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/he.png"
            alt="领取保障"
          />
        </view>
        <view class="g-b-txt">
          <view class="g-b-t1">您有{{ sickEsTimate.length }}份健康评估服务未开通</view>
          <view class="g-b-t2">大病风险早知道</view>
        </view>
        <view class="g-b-btn" @click="toOpenSick">去开通</view>
      </view>
      -->
      <!-- 测试服务包 -->

      <!-- <view class="f-btn f-btn-orange" @click="goPckDetail(115)">服务包IP0277</view>
      <view class="f-btn f-btn-orange" @click="goPckDetail(116)">服务包IP0278</view>
      <view class="f-btn f-btn-orange" @click="goPckDetail(117)">服务包IP0279</view> -->

      <!-- 服务计划 -->
      <view v-if="welfarePlanList.length > 0" class="plan">
        <view class="k-title class-title">
          服务套餐
          <span class="class-more" @click="getMoreService">更多</span>
          <span class="class-right"><img :src="rightIcon" /></span>
        </view>
        <swiper class="plan-swiper" autoplay :circular="true" :interval="2000">
          <swiper-item v-for="(item, index) in welfarePlanList" :key="index" @click="goWelfarePlan(item, index)">
            <view class="plan-img">
              <img :src="item.path" :alt="item.title" />
            </view>
          </swiper-item>
        </swiper>
      </view>

      <!-- 救助
      <view class="rescue">
        <view class="re-1">
          <view class="re-1-title">救助</view>
          <view class="re-1-con">
            <view class="re-item">
              <view class="re-1-num">{{ assistCount }}人</view>
              <view class="re-1-txt">救助累计</view>
            </view>
            <view class="re-item">
              <view class="re-1-num">{{ (assistAmount / 10000).toFixed(2) }}万元</view>
              <view class="re-1-txt">发放总额</view>
            </view>
            <view class="re-btn"></view>
          </view>
        </view>
        <view class="re-2">
          <view class="re-2-title">
            <view class="re-2-title-lineLeft"></view>
            <view>已获得救助的会员</view>
            <view class="re-2-title-lineRight"></view>
          </view>
          <view class="re-2-mem re-2-mem1">
            <view ref="memInner1" class="re-2-mem-inner" :animation="mem1Animation">
              <view
                v-for="(item, index) in finalMem1List"
                :key="index"
                :ref="'mem1Item' + index"
                :class="['re-2-mem-img']"
                @click="goStory(item, index, 1)"
              >
                <image :src="item.headImg" alt="已获得救助的会员" mode="aspectFill" />
              </view>
            </view>
          </view>
          <view class="re-2-mem re-2-mem2">
            <view ref="memInner2" class="re-2-mem-inner" :animation="mem2Animation">
              <view
                v-for="(item, index) in finalMem2List"
                :key="index"
                :ref="'mem2Item' + index"
                :class="['re-2-mem-img']"
                @click="goStory(item, index, 2)"
              >
                <image :src="item.headImg" alt="已获得救助的会员" mode="aspectFill" />
              </view>
            </view>
          </view>
        </view>
      </view>
      -->
      <!-- 捐助
      <view class="donate">
        <view class="re-1">
          <view class="re-1-title">捐助</view>
          <view class="re-1-con">
            <view class="re-item">
              <view class="re-1-num">{{ donationCount }}人</view>
              <view class="re-1-txt">捐助累计</view>
            </view>
            <view class="re-item">
              <view class="re-1-num">{{ (donationAmount / 10000).toFixed(2) }}万元</view>
              <view class="re-1-txt">捐助总额</view>
            </view>
            <view class="re-btn" @click="goDonate"> 我要捐助 </view>
          </view>
        </view>
        <view class="re-2">
          <view class="re-2-title">
            <view class="re-2-title-lineLeft"></view>
            <view>已捐献金的会员</view>
            <view class="re-2-title-lineRight"></view>
          </view>
          <swiper class="donate-swiper" autoplay :vertical="true" :circular="true" :interval="2000">
            <swiper-item
              v-for="(item, index) in donationObjects"
              :key="index"
              class="donate-swiper-item donate-swiper-item1"
            >
              <view class="donate-item donate-item1">
                <view class="do-i-logo"><image :src="hLogo" alt="" mode="aspectFit" /></view>
                <view class="do-i-m-wrap">
                  <view>{{ item[0].name | markName }}捐献</view>
                  <view class="do-i-money">{{ item[0].amount }}</view>
                  <view>元</view>
                </view>
                <view class="do-i-date">{{ item[0].date }}</view>
              </view>
              <view class="donate-item donate-item2">
                <view class="do-i-logo"><image :src="hLogo" alt="" mode="aspectFit" /></view>
                <view class="do-i-m-wrap">
                  <view>{{ item[1].name | markName }}捐献</view>
                  <view class="do-i-money">{{ item[1].amount }}</view>
                  <view>元</view>
                </view>
                <view class="do-i-date">{{ item[1].date }}</view>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
      -->
      <!-- 健康课 -->
      <view v-if="classVideoData.length > 0" class="know">
        <view class="k-title class-title">
          健康课
          <span class="class-more" @click="goWebView">更多</span>
          <span class="class-right"><img :src="rightIcon" /></span>
        </view>
        <view class="classList">
          <view v-for="item in classVideoData" :key="item.id" class="list" @click="goVideoDetails(item.id)">
            <view class="images"><img :src="item.videoCover" mode="heightFix" /></view>
            <view class="name">{{ item.title }}</view>
          </view>
        </view>
      </view>
      <!-- 涨知识 -->
      <view class="know">
        <view class="k-title class-title"
          >涨知识
          <span class="class-more" @click="goKnowledge">更多</span>
          <span class="class-right"><img :src="rightIcon" /></span>
        </view>
        <view class="k-swiper" autoplay :circular="true" :interval="2000">
          <view @click="goLearn(knowledgeList[0])">
            <view class="k-img">
              <img :src="knowledgeList[0].imgs[0]" :alt="knowledgeList[0].title" />
              <!-- <view class="k-img-btn" >涨知识</view> -->
            </view>
          </view>
        </view>
        <view class="k-item-wrap">
          <view v-for="(item, index) in knowledgeListPicArt" :key="index" class="k-item" @click="goLearn(item, index)">
            <view class="k-logo">
              <image :src="item.imgs[0]" mode="aspectFit" />
            </view>
            <view class="k-des">
              {{ item.title }}
            </view>
          </view>
        </view>
        <!-- <view class="k-btn" @click="goKnowledge()">涨更多知识</view> -->
      </view>
    </view>

    <!-- 人物选择弹窗 -->
    <view v-if="showFamilySelectModal" class="pickFamily">
      <!-- 背景图 -->
      <view class="pf-mask"> </view>
      <view class="pf-cont">
        <image :src="closePng" class="pf-close" mode="aspectFit" @click="closeFamilyModalByClose" />
        <view class="pf-icon">
          <view class="pf-inner">
            <view class="pf-bell"></view>
          </view>
        </view>
        <view class="pf-active">
          <view v-if="familyModalType === 'service'" class="pf-title">您有以下关系人的服务处于待激活状态，请选择</view>
          <view v-if="familyModalType === 'sick'" class="pf-title"
            >您有以下关系人均含有未开通的健康评估服务，请选择</view
          >
          <view v-if="familyModalType === '3d'" class="pf-title">您有以下关系人均含有未开通的三定送药服务，请选择</view>
          <view
            v-for="(item, index) in familyList"
            :key="index"
            :class="[checkFamilyIndex === index ? 'active' : '', 'pf-item']"
            @click="checkFamily(index)"
          >
            <!-- 姓名 -->
            <view class="pf-name">{{ item.insuredName }}</view>

            <!-- 保险 -->
            <!-- <view v-if="familyModalType === 'service'">
              <view class="pf-pro">{{ item.productName || '' }}</view>
            </view> -->

            <view v-if="familyModalType === 'service'">
              <view v-for="(pro, index) in item.products" :key="index">
                <view v-if="pro.productType === 1" class="pf-pro">
                  {{ pro.productName || '' }}
                </view>
              </view>
            </view>

            <!-- 健康评估 -->

            <!-- <view v-if="familyModalType === 'sick'">
              <view v-for="(pro, index) in item.products" :key="index">
                <view v-if="pro.productType === 3" class="pf-pro">
                  {{ pro.productName || '' }}
                </view>
              </view>
            </view> -->

            <!-- 三定 -->
            <!-- <view v-if="familyModalType === '3d'">
              <view v-for="(pro, index) in item.products" :key="index">
                <view v-if="pro.productType === 8 && pro.existEstimatedOrder === false" class="pf-pro">
                  {{ pro.productName || '' }}
                </view>
              </view>
            </view> -->

            <view v-if="checkFamilyIndex === index" class="pf-checked-icon"></view>
          </view>
          <view class="pf-btn" @click="closeFamilySelectModal"> 确定 </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import logoSrc3 from '@/static/index/logo3.png';
import logoSrc4 from '@/static/index/logo4.png';
import rightIcon from '@/static/icon/right.png';

// 保障、非保障图片地址
import bzPng from '@/static/icon/bz.png';
import dbPng from '@/static/icon/db.png';
import wbPng from '@/static/icon/wb.png';
import aLoadingPng from '@/static/icon/aloading.png';

import { getIndexData, getAds, getFamilyInsurances, getFamilyJoinCount } from '@/api/index.js';
import { getUserInfoByPatientId, getCurrentUserInfo } from '@/api/join.js';
import { getArticles, disclosure } from '@/api/welfare';
// 引入统计
import { tongji } from '@/utils/tools.js';
import { commonProjectType } from '@/common/baseUrl.js';
// 引入vux mapState
import { mapState } from 'vuex';
export default {
  filters: {
    markName(name) {
      return name.slice(0, 1) + '*' + name.slice(2);
    }
  },
  data() {
    return {
      membersStatus: {
        0: wbPng,
        2: dbPng,
        3: bzPng
      },
      aLoadingPng,
      showLoadingModal: false,
      closePng:
        'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/error.png',
      logoSrc3,
      logoSrc4,
      rightIcon: rightIcon,
      videoCover:
        'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/videoCover.png',
      sumCoverage: 0,
      hLogo:
        'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/h.png', // 小手的logo
      showFamilySelectModal: false, // 是否显示选择家人弹窗
      checkFamilyIndex: -1, // 被选中的家人索引值
      relationWithInsurerArr: [], // 购买过服务包的用户跟登录用户的关系列表
      servingMemberCount: 0, // 保障家庭成员数
      tabList: [
        {
          logo:
            'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/service.png',
          id: 'service',
          name: '全部服务',
          href: '/pages/service/index'
        },
        {
          logo:
            'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/show-welfare.png',
          id: 'showWelfare',
          name: '公示',
          href: '/pages/helpApply/index'
        }
        // {
        //   logo: myWelfare,
        //   id: 'myWelfare',
        //   name: '我的',
        //   href: '/pages/myWelfare/index'
        // },
        // {
        //   logo: shop,
        //   id: 'shop',
        //   name: '商城',
        //   href: ''
        // }
      ],
      welfarePlanList: [], // 服务计划列表
      knowledgeList: [],
      knowledgeListPicArt: [],
      assistCount: 0, // 救助人数
      assistAmount: 0, // 救助金额
      donationCount: 0, // 捐助人数
      donationAmount: 0, // 捐助金额
      mem1List: [],
      finalMem1List: [],
      mem2List: [],
      finalMem2List: [],
      mem1ActiveIndex: undefined,
      mem2ActiveIndex: undefined,
      donationObjects: [],
      videoList: [
        // {
        //   title: '项目由谁发起的？',
        //   des: '由北京爱尔和万户良方科技共同发起、中国市长协会支持。'
        // },
        {
          title: '项目服务宗旨？',
          des: '为中老人年提供健康管理权益和重大疾病保障权益。'
        },
        {
          title: '项目是否收费？',
          des: '会员免费获得，无需额外缴费。'
        }
      ],
      hkeyList: [
        {
          name: '老年人的',
          name2: '"医"',
          src:
            'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/ly.png'
        },
        {
          name: '老年人的',
          name2: '"药"',
          src:
            'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/ly2.png'
        },
        {
          name: '老年人的',
          name2: '"险"',
          src:
            'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/l-x.png'
        },
        {
          name: '老年人的',
          name2: '"健康管理"',
          src:
            'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/l-jk.png'
        }
      ],
      mem1Animation: '',
      mem2Animation: '',
      beBigerIndex1: 2,
      beBigerIndex2: 3,
      showTiming: false, // 是否显示三定用药,
      service3d: [], // 三定用药服务单信息,
      familyModalType: undefined, // service 为服务  3d为三定
      familyList: [],
      sickEsTimate: [], // 健康评估,
      patientId: '',
      hasScroll: false,
      navBarTop: 4, // 小程序导航的高度,
      statusNavBarHeight: 68, // 状态栏总高度，默认68px
      classVideoData: [],
      userInfo: {},
      familyInsurances: [],
      isLogin: wx.getStorageSync('token') || false,
      numberData: {},
      currentUserInfo: {}
    };
  },
  computed: {
    // 使用对象展开运算符将此对象混入到外部对象中
    ...mapState('join', {
      // ...,
      referers: 'referers'
    })
  },
  onPageScroll(obj) {
    if (!this.hasScroll && obj.scrollTop > 10) {
      this.hasScroll = true;
    } else if (this.hasScroll && obj.scrollTop < 10) {
      this.hasScroll = false;
    }
  },
  onLoad() {
    // 设置导航条高度
    console.log('onLoad');
    this.setNavigationBar();

    let patientId = this.$store.state.join.patientid;
    this.patientId = patientId;
    // 获取首页的数据
    // this.getIndexData_self();
    // 获取服务计划
    getAds('万户健康小程序-首页-服务计划轮播').then((res) => {
      if (res.code === 0) {
        this.welfarePlanList = res.data;
        this.welfarePlanList.forEach((item) => {
          item.url = item.url && item.url.replace(/https?:\/\//, '');
          if (item.url && item.url[0] !== '/') {
            item.url = '/' + item.url;
          }
        });
      } else {
        uni.showToast({ title: '获取服务计划广告失败' });
      }
    });
    // 保障金的会员 暂时不需要这个功能了
    // this.getMember();
    // 获取涨知识
    this.getKnowledgeList();
    // 获取视频
    this.getVideoListObj();
    // 获取已加入项目6的数量统计
    this.getDisclosure();
  },
  onShow() {
    // this.showLoadingFn();
    // 获取首页的数据
    this.isLogin = wx.getStorageSync('token') || false; // 登录返回后数据重新拉取更新
    if (this.isLogin) {
      this.getIndexData_self();
      // 获取当前用户相关信息
      try {
        this.userInfo = JSON.parse(wx.getStorageSync('rawData'));
      } catch (e) {
        console.log('e:', e);
      }
    }
    // 放大的动画
    this.mem1ActiveIndex = undefined;
    this.mem2ActiveIndex = undefined;
    this.getFamilyJoinCountFun();

    if (wx.getStorageSync('token')) {
      getCurrentUserInfo().then((res) => {
        if (res.code === 0) {
          this.currentUserInfo = res.data;
        } else {
          this.$message({
            type: 'error',
            message: '获取当前用户信息失败'
          });
        }
      });
    }
  },
  methods: {
    async getDisclosure() {
      let numberRes = await disclosure();
      if (numberRes.code === 0) {
        this.numberData = numberRes.data;
      }
    },
    checkHadService() {
      // 首页-已购服务
      tongji('64c7caed-3750-4021-b713-66503b00ce75');
      this.jumpPage('/pages/service/index');
    },
    getMoreService() {
      // 更多
      tongji('29368023-e228-49dc-954e-4c9897acce2c');
      this.jumpPage('/pagesC/service/index');
    },
    // 需求2671，只需要分享给朋友
    onShareAppMessage: function (e) {
      let title = '万户健康——家庭健康整体解决方案';
      return {
        title: title,
        path: '/pages/index/index?cid=' + this.currentUserInfo.cid,
        imageUrl:
          'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-community/zzjj.png'
      };
    },
    goPckDetail(id) {
      wx.navigateTo({
        url: '/pagesC/service/detail?id=' + id
      });
    },
    setNavigationBar() {
      // 参考链接 https://blog.csdn.net/Blablabla_/article/details/102466384
      // 设置导航条
      let info = wx.getSystemInfoSync();
      let statusBarHeight = info.statusBarHeight;
      const menuButtonObject = wx.getMenuButtonBoundingClientRect();
      const { top, height } = menuButtonObject;
      this.statusNavBarHeight = height + (top - statusBarHeight) * 2 + statusBarHeight;
      this.navBarTop = (height - 36) / 2 + top; // 36 为胶囊按钮的高度
    },
    getIndexData_self() {
      // 获取首页数据
      let patientId = this.$store.state.join.patientid;
      if (patientId) {
        getIndexData(patientId).then((res) => {
          if (res.code === 0) {
            let resData = res.data;
            // 捐款金额
            this.sumCoverage = resData.sumCoverage;
            // 已服务
            // 购买过服务包的对象
            // let serviceOrders = resData.serviceOrders;
            // let sortData = [];
            // let sortByIndex = [1, 3, 2, 4]; // //按本人，父母，配偶，子女的顺序进行排列    。1 本人 2配偶 3父母 4子女
            // for (let i = 0; i < sortByIndex.length; i++) {
            //   serviceOrders.forEach((item) => {
            //     if (item.relationWithInsurer === sortByIndex[i]) {
            //       sortData.push(item);
            //     }
            //   });
            // }
            // sortData.forEach((item) => {
            //   // sex 1男  0为女
            //   if (item.sex === 1) {
            //     if (item.relationWithInsurer === 3) {
            //       item.src = father;
            //     } else if (item.relationWithInsurer === 4) {
            //       item.src = son;
            //     } else {
            //       item.src = man;
            //     }
            //   } else {
            //     if (item.relationWithInsurer === 3) {
            //       item.src = mother;
            //     } else if (item.relationWithInsurer === 4) {
            //       item.src = der;
            //     } else {
            //       item.src = woman;
            //     }
            //   }
            //   // 如果是本人的话，则使用微信头像
            //   if (item.relationWithInsurer === 1) {
            //     item.src = this.userInfo.avatarUrl || item.src;
            //   }
            // });

            // 家庭关系，去重
            // let relationHasPush = [];
            // this.relationWithInsurerArr = sortData.filter((item) => {
            //   if (relationHasPush.includes(item.insuredId)) {
            //     return false;
            //   } else {
            //     relationHasPush.push(item.insuredId);
            //     return true;
            //   }
            // });
            const newUserInfo = [
              {
                relation: 1,
                patientId: this.patientId,
                sex: null,
                status: null
              }
            ];

            let resDataOrigin = resData.members.length > 0 ? resData.members : newUserInfo;
            // 对家庭组进行排序，本人、父母、配偶、子女
            let familySort = [1, 3, 2, 4];
            let sortResData = [];
            let resObj = {};
            resDataOrigin.forEach((fData) => {
              let relation = fData.relation;
              if (resObj[relation]) {
                resObj[relation].push(fData);
              } else {
                resObj[relation] = [fData];
              }
            });
            familySort.forEach((fIndex) => {
              if (resObj[fIndex]) {
                sortResData = sortResData.concat(resObj[fIndex]);
              }
            });

            this.relationWithInsurerArr = sortResData;

            this.relationWithInsurerArr.forEach((item) => {
              if (item.sex === 1) {
                if (item.relation === 3) {
                  item.src =
                    'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/father.png';
                } else if (item.relation === 4) {
                  item.src =
                    'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/son.png';
                } else {
                  item.src =
                    'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/man.png';
                }
              } else {
                if (item.relation === 3) {
                  item.src =
                    'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/mother.png';
                } else if (item.relation === 4) {
                  item.src =
                    'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/der.png';
                } else {
                  item.src =
                    'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/woman.png';
                }
              }
              // 如果是本人的话，则使用微信头像
              if (item.relation === 1) {
                item.src = this.userInfo.avatarUrl || item.src;
              }
            });

            // 保障家庭成员数
            // this.servingMemberCount = resData.servingMemberCount;
            // console.log('this.relationWithInsurerArr:',this.relationWithInsurerArr)

            // 三定用药相关逻辑

            let service3dHasPush = [];
            // 获取三定用药相关信息  服务订单状态为服务中，
            this.service3d = resData.serviceOrders.filter((item) => {
              // 是否购买项目且未提交健康评估信息
              let has3d = false;
              let products = item.products;
              if (products) {
                has3d = products.some((pro) => {
                  // 药品直供且未创建药品首单
                  if (pro.productType === 8 && pro.existEstimatedOrder === false) {
                    return true;
                  }
                  return false;
                });
              }
              if (item.orderStatus === 3 && has3d) {
                return true;
              }
              return false;
            });

            this.service3d = this.service3d.filter((item) => {
              if (!service3dHasPush.includes(item.insuredId)) {
                service3dHasPush.push(item.insuredId);
                return true;
              } else {
                return false;
              }
            });

            // 获取健康评估
            let sickHasPush = [];
            this.sickEsTimate = [];
            resData.serviceOrders.forEach(async (item) => {
              // 获取用户有没有做过健康评估
              // let res = await isPhysicalExamination(item.insuredId);
              // let isOk = false;
              // if (res.code !== 0) {
              //   // uni.showModal({
              //   //   title: '提示',
              //   //   content: '获取是否有健康评估档案出错'
              //   // });
              // } else {
              //   if (res.data) {
              //     // 做过健康评估
              //   } else {
              //     // 没有做过健康评估
              //     isOk = item.products.some((pro) => {
              //       return pro.productType === 3;
              //     });
              //   }
              // }
              // 服务中，且为健康评估，且healthEvaluate为false
              if (item.orderStatus === 3) {
                let isOk =
                  item.products &&
                  item.products.some((pro) => {
                    return pro.productType === 3 && !pro.healthEvaluate;
                  });
                if (isOk && !sickHasPush.includes(item.insuredId)) {
                  sickHasPush.push(item.insuredId);
                  this.sickEsTimate.push(item);
                }
              }
            });

            // 救助人数和金额
            this.assistCount = resData.assistCount;
            this.assistAmount = resData.assistAmount;
            this.donationCount = resData.donationCount;
            this.donationAmount = resData.donationAmount;
            // 捐助列表,需要把接口返回的数据拆成2维数组
            let tempDonationList = resData.donationObjects;

            if (tempDonationList && tempDonationList.length > 0) {
              for (let i = 0; i + 1 < tempDonationList.length; i += 2) {
                this.donationObjects.push([tempDonationList[i], tempDonationList[i + 1]]);
              }
            }
          } else {
            uni.showToast({ title: '获取用户信息失败' });
          }

          // console.log('res:', res);
        });

        // 获取家庭成员保险订单
        getFamilyInsurances(patientId, {
          projectType: commonProjectType,
          orderStatus: 3,
          payStatus: 1,
          status: 0,
          isHealthEnquiry: 0
        }).then((res) => {
          if (res.code === 0) {
            this.familyInsurances = res.data;
          } else {
            uni.showModal({
              title: '提示',
              message: '获取会员保险订单失败'
            });
          }
        });
      } else {
        this.$wxPromise.navigateTo({
          url: '/pages/join/form?fromPage=1'
        });
      }
    },

    /* eslint-disable */

    getMember() {
      // 获取保障金会员
      getArticles({
        where: JSON.stringify({
          articleCategory: '故事',
          articleCategoryRange: 1
        }),
        limit: 10
      }).then((res) => {
        if (res.code === 0) {
          let resData = res.data;
          // mem1List 的长度
          this.mem1List = resData.slice(0, 10);
          // 获取封面图
          this.mem1List.forEach((item) => {
            if (item.imgs) {
              item.headImg = item.imgs.split(',')[0];
            } else {
              item.headImg =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/man.png';
            }
            return;
          });
          // mem2List 是mem1List的随机排列
          this.mem2List = Object.assign([], this.mem1List).sort(() => {
            return Math.random() - 0.5;
          });
          // 开启动画
          this.gallaryAnimation();
        } else {
          uni.showToast({ title: '获取故事文章失败' });
        }
      });
    },
    getKnowledgeList() {
      // 获取涨知识
      getArticles({
        where: JSON.stringify({
          articleCategory: '涨知识专题',
          articleCategoryRange: 1
        }),
        limit: 3,
        nearBy: 'desc'
      }).then((res) => {
        if (res.code === 0) {
          let resData = res.data;
          // mem1List 的长度
          this.knowledgeList = resData;
          this.knowledgeList.forEach((item) => {
            if (item.imgs) {
              item.imgs = item.imgs.split(',');
            } else {
              item.imgs = [
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/man.png'
              ];
            }
          });

          // 按照创建时间倒序排列
          this.knowledgeList.sort((cur, next) => {
            if (next.createddate && cur.createddate) {
              return (
                new Date(next.createddate.replace(new RegExp(/-/gm), '/')) -
                new Date(cur.createddate.replace(new RegExp(/-/gm), '/'))
              );
            }
            return 0;
          });
          this.knowledgeListPicArt = this.knowledgeList.slice(1);
        } else {
          uni.showToast({ title: '获取故事文章失败' });
        }
      });
    },
    toActive() {
      // 友盟
      tongji('2c586635-0c5c-46f9-90f1-5ea16b1266c2');
      // 激活服务  如果只有1个人需要激活，则直接跳转到服务页面，否则需要弹窗让用户选择需要激活的人
      if (this.familyInsurances.length === 1) {
        let item = this.familyInsurances[0];
        uni.reLaunch({
          url: '/pages/service/index?patientId=' + item.insuredId
        });
      } else {
        this.familyList = this.familyInsurances;
        this.familyModalType = 'service';
        this.showFamilySelectModal = true;
      }
    },
    toOpen3d() {
      // 友盟
      tongji('eb7db713-4040-4d47-a104-2cf152680f61');
      // 开通三定用药
      if (this.service3d.length === 1) {
        let item = this.service3d[0];
        this.$wxPromise.navigateTo({
          url: `/pages/deliveryService/index?insuredPatientId=${item.insuredId}&orderId=${item.orderId}`
        });
      } else {
        this.familyList = this.service3d;
        this.familyModalType = '3d';
        this.showFamilySelectModal = true;
      }
    },
    toOpenSick() {
      // 友盟
      tongji('0bbb9cab-f63f-4063-857e-ff855d681a69');
      // 健康评估
      if (this.sickEsTimate.length === 1) {
        let item = this.sickEsTimate[0];
        this.$wxPromise.navigateTo({
          // 健康评估
          url: `/pagesB/assessSick/index?patientId=${item.insuredId}&sex=${item.sex}&name=${item.insuredName}`
        });
      } else {
        this.familyList = this.sickEsTimate;
        this.familyModalType = 'sick';
        this.showFamilySelectModal = true;
      }
    },
    getUserGender() {
      // 0 未知  1男性  2女性
      try {
        let rawData = wx.getStorageSync('rawData');
        if (rawData) {
          return JSON.parse(rawData).gender;
        }
        return 1;
      } catch (e) {
        console.log('首页，获取用户性别失败。e:', e);
        return 1;
      }
    },
    helpFamilyJoin() {
      // 友盟统计
      tongji('7de742a1-ec1f-403f-ab59-09814a40c442');
      // 帮家人加入
      getUserInfoByPatientId(this.$store.state.join.patientid).then((res) => {
        this.$wxPromise.navigateTo({
          url: '/pagesC/service/index'
        });
        // if (res.code === 0 && res.data.realNameAuthenticationPassed === 1) {
        //   this.$wxPromise.navigateTo({
        //     url: "/pages/join/form?fromPage=1",
        //   });
        // } else {
        //   this.$wxPromise.navigateTo({
        //     url: "/pages/join/authorIdentityChaeck",
        //   });
        // }
      });
    },
    checkFamily(index) {
      // 当有多个家人待激活时，选择家人
      this.checkFamilyIndex = index;
    },
    closeFamilyModalByClose() {
      this.checkFamilyIndex = -1;
      this.showFamilySelectModal = false;
    },
    closeFamilySelectModal() {
      // 被选中的家人
      if (this.checkFamilyIndex !== -1) {
        let item = this.familyList[this.checkFamilyIndex];

        if (this.familyModalType === 'service') {
          // 保险
          uni.reLaunch({
            url: '/pages/service/index?orderId=' + item.id + '&patientId=' + item.insuredId
          });
        } else if (this.familyModalType === 'sick') {
          this.$wxPromise.navigateTo({
            // 健康评估
            url: `/pagesB/assessSick/index?patientId=${item.insuredId}&sex=${item.sex}&name=${item.insuredName}`
          });
        } else if (this.familyModalType === '3d') {
          // 三定用药
          this.$wxPromise.navigateTo({
            url: `/pages/deliveryService/index?insuredPatientId=${item.insuredId}&orderId=${item.orderId}`
          });
          // patientId存cookie
          uni.setStorage({
            key: 'insuredPatientId',
            data: item.insuredId
          });
        }
        this.showFamilySelectModal = false;
      } else {
        uni.showToast({ title: '请选择要激活的用户' });
      }
      this.checkFamilyIndex = -1;
    },
    getRandomNum(start, end) {
      return Math.random() * (end - start);
    },
    goWelfarePlan(item, index) {
      // console.log('goWelfarePlan item:', item);
      // this.$wxPromise.navigateTo({
      //   url: `/pagesC/service/detail?id=${item.id}`
      // });
      if (item.url) {
        let url = item.url;
        const id = url.split('?id=')[1];
        this.$store.commit('join/SET_COMMUNITYSERVICEID', id);
        url = url.replace('http://', '/');
        this.$wxPromise.navigateTo({
          url: url
        });
      }
      switch (index) {
        case 0:
          tongji('1eff7d33-8394-4212-8fb4-8582b37a69fc');
          break;
        case 1:
          tongji('229d923a-ff4b-4a0e-ac5e-5c443e15951d');
          break;
        case 2:
          tongji('4b68c002-79c8-4ac9-843d-d12c8b6e374f');
          break;
      }
    },
    goKnowledge(item) {
      tongji('37336be0-1391-4081-a3a0-f0450a5281bf');
      this.$wxPromise.navigateTo({
        url: '/pages/learn/index'
      });
    },
    gallaryAnimation() {
      // 会员滚动的动画，1s滚动1个，
      let unitNum = 100;
      let that = this;
      // 头像的宽度 + 间距
      let memWidth = 128 + 8;
      // 设置总的动画运动时间，如果运动完成，重新开始动画。默认1s运动一个头像
      let totalAniTime = unitNum * 1000;
      // 设置总的运动距离
      let totalAniDistance = unitNum * memWidth;
      const animation = uni.createAnimation({
        duration: totalAniTime,
        timingFunction: 'linear'
      });

      const imAnimation = uni.createAnimation({
        duration: 0,
        timingFunction: 'linear'
      });
      // 将需要展示的会员数量，复制成unitNum个
      let temp1Arr = [];
      let temp2Arr = [];
      if (that.mem1List.length > 0 && that.mem2List.length > 0) {
        let mem1ListSlice = that.mem1List.slice(0);
        let mem2ListSlice = that.mem2List.slice(0);
        let copyNums = Math.ceil(unitNum / that.mem1List.length);
        for (let i = 0; i <= copyNums + 1; i++) {
          temp1Arr = temp1Arr.concat(mem1ListSlice);
          temp2Arr = temp2Arr.concat(mem2ListSlice);
        }
        that.finalMem1List = temp1Arr.slice(0, unitNum);
        that.finalMem2List = temp2Arr.slice(0, unitNum);
        let memAnimationData = animation
          .translateX(-totalAniDistance + 'rpx')
          .step()
          .export();
        that.mem1Animation = memAnimationData;
        that.mem2Animation = memAnimationData;

        setInterval(() => {
          let memAnimationData = imAnimation.translateX('0rpx').step().export();
          that.mem1Animation = memAnimationData;
          that.mem2Animation = memAnimationData;
          setTimeout(() => {
            let memAnimationData = animation
              .translateX(-totalAniDistance + 'rpx')
              .step()
              .export();
            that.mem1Animation = memAnimationData;
            that.mem2Animation = memAnimationData;
          }, 50);
        }, totalAniTime - 6000); // -6秒是原因,页面一次最多显示6个头像，为了避免出现空白所以要减去这6个头像运动的时间
      }
    },
    bigSingerMemAni() {
      let that = this;
      let index = 5;
      // 每5s，选择一个元素放大
      setInterval(() => {
        let radNum1 = Math.round(Math.random() * 5);
        let radNum2 = Math.round(Math.random() * 5);
        that.beBigerIndex1 = index + radNum1;
        that.beBigerIndex2 = index + radNum2;
        if (that.beBigerIndex1 > that.mem1List.length) {
          that.beBigerIndex1 = radNum1;
          that.beBigerIndex2 = radNum2;
          index = 5;
        }
        index += 5;
      }, 5000);
    },

    tabClick(item) {
      // 点击tab标签
      if (item.id === 'shop') {
        uni.showModal({
          title: '提示',
          content: '功能建设中，敬请期待'
        });
      } else {
        if (!this.isLogin) {
          this.goLogin(item.href);
          return;
        }
        this.$wxPromise.navigateTo({
          url: item.href
        });
      }
      // 友盟数据统计
      if (item.id === 'service') {
        // 全部服务
        tongji('c5894566-ff24-47cd-8c72-223c53c5d672');
      } else if (item.id === 'showWelfare') {
        // 公示
        tongji('b0f881ec-e80b-435c-8ced-912f4311c9f5');
      }
    },
    goDonate() {
      this.$wxPromise.navigateTo({
        url: '/pages/donations/index'
      });
    },
    applyInsureMoney() {
      // 申请金页面
      uni.navigateTo({
        url: 'pages/getWelfareGold/index'
      });
    },
    splitNum(num, len) {
      len = len || 3;
      let memberNumStr = String(num);
      // 把字符串反转
      let memberNumArr = [];
      let i = memberNumStr.length - len;
      for (; i > 0; i -= len) {
        memberNumArr.unshift(memberNumStr.slice(i, i + len));
      }
      let subStr = memberNumStr.slice(0, i + len);
      if (subStr) {
        memberNumArr.unshift(subStr);
      }
      return memberNumArr.join(',');
    },
    goStory(item, index, kind) {
      // console.log('goStory item:',item)
      if (kind === 1) {
        this.mem1ActiveIndex = index;
      } else {
        this.mem2ActiveIndex = index;
      }
      setTimeout(() => {
        this.mem1ActiveIndex = undefined;
        this.mem2ActiveIndex = undefined;
      }, 0);
      if (!item.id) return;
      this.$wxPromise.navigateTo({
        url: '/pages/article/index?id=' + item.id,
        complete: () => {
          console.log('complete');
        }
      });
    },
    goLearn(item, index) {
      // console.log('goStory item:',item)
      if (!item.id) return;
      this.$wxPromise.navigateTo({
        url: '/pages/learn/detail?id=' + item.id
      });
      if (index === undefined) {
        tongji('db71cc3d-9a3b-42bd-a66e-8d0d0e2c8634');
      } else {
        switch (index) {
          case 0:
            tongji('41a07385-8977-40e9-8f8b-4b45c7f64978');
            break;
          case 1:
            tongji('e8991c9d-3490-433e-9b49-4ad28b2ff671');
            break;
        }
      }
    },
    async getVideoListObj() {
      let where = JSON.stringify({
        articleCategory: '健康课堂', //如存在，分类范围不能为空
        articleCategoryRange: 2 //分类范围 1=当前分类 2=当前和子分类
        // articleType: 1 //文章类型 1=视频 2=文本
      });
      // where = String(where);
      const skip = 0;
      const limit = 20;
      const desc = 'desc';
      const { data: videlList } = await getArticles({
        where,
        skip,
        limit
      });
      // 下面这没有封面图的给补充一个封面图
      const videoData = videlList.map((item) => {
        if (!item.videoCover) {
          item.videoCover = this.videoCover;
        }
        return item;
      });
      // 下面这取有封面的数据
      // const videoData = videlList.filter((item) => item.videoCover);

      let item = [];
      if (videoData.length > 4) {
        for (let i = 0; item.length < 4; i++) {
          let val = videoData[Math.floor(Math.random() * videoData.length)];
          let ifHave = item.some((res) => {
            return res.id === val.id;
          });
          if (!ifHave) {
            item.push(val);
          }
        }
      } else {
        item = videoData;
      }
      this.classVideoData = item;
    },
    async getFamilyJoinCountFun() {
      if (this.isLogin) {
        const { data } = await getFamilyJoinCount(this.patientId || this.$store.state.join.patientid);
        this.servingMemberCount = data.length || 0;
      } else {
        this.servingMemberCount = 0;
      }
    },
    goVideoDetails(id) {
      let urlsLink = `healthClass?id=${id}`;
      let url = `/pages/jump_web/index?urls=healthClass&id=${id}`;
      this.$wxPromise.navigateTo({
        url: url
      });
    },
    goWebView() {
      let urlsLink = 'health';
      let url = '/pages/jump_web/index?urls=health';
      this.$wxPromise.navigateTo({
        url: url
      });
    },
    goService(item) {
      // 首页-用户头像
      tongji('a60bfb39-a351-4c51-9270-7e225178172d');
      this.$wxPromise.navigateTo({
        url: '/pages/service/index?patientId=' + item.patientId
      });
    },
    goLogin(url) {
      const routes = getCurrentPages();
      const routesSrc = routes[routes.length - 1].route;
      const curRoute = url && typeof url === 'string' ? url : routesSrc; //获取当前页面路由
      this.$store.commit('join/SET_REFERERS', curRoute.startsWith('/pages') ? `${curRoute}` : `/${curRoute}`);
      this.$wxPromise.navigateTo({
        url: '/pages/join/index'
      });
    },
    jumpPage(val) {
      this.$wxPromise.navigateTo({
        url: val
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@mixin itemCustomStyle {
  width: 700rpx;
  margin-top: 24rpx;
  border-radius: 24rpx;
  box-sizing: border-box;
  border-radius: 16rpx;
  display: flex;
  overflow: hidden;
}
$itemMarginTop: 24rpx;
@keyframes headRotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.index {
  margin-top: -1px;
  background: linear-gradient(184deg, #fb6f6f 0%, #f63434 100%);
  background-position: top;
  background-repeat: no-repeat;
  background-size: 100% 500rpx;
  width: 100%;
  overflow-x: hidden;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
  position: relative;
  @supports not (constant(safe-area-inset-bottom)) {
    padding-bottom: 20rpx;
  }

  .loading {
    width: 102%;
    height: 102%;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;

    img {
      width: 80rpx;
      height: 80rpx;
      margin-top: -200rpx;
      animation: headRotate 1s linear infinite;
    }
  }

  .i-bg-img {
    position: absolute;
    top: var(--status-bar-height);
    background-image: url('https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/t-bg.png');
    right: 30rpx;
    width: 420rpx;
    height: 320rpx;
    background-size: 100%;
  }
  .i-nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    &.bgWhite {
      background: white;
    }
    .status-bar {
      position: relative;
      height: var(--status-bar-height);
      width: 100%;
    }
    .logo {
      width: 100%;
      z-index: 100;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      left: 25rpx;
      margin-top: 10rpx;
      img {
        width: 282rpx;
        height: 56rpx;
      }
    }
  }

  .content {
    padding: 0rpx 24rpx;
    margin-top: 210rpx;
    position: relative;
    .info {
      color: rgba(255, 255, 255, 0.6);
      .i-white {
        color: #ffffff;
      }
    }
    .family-card {
      width: 700rpx;
      border-radius: 24rpx;
      margin-top: 24rpx;
      background-image: url('https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/family-bg.png');
      background-size: contain;
      background-repeat: no-repeat;
      box-sizing: border-box;
      padding: 48rpx 24rpx 26rpx;
      background: white;
      .f-scroll-x {
        width: 100%;
        height: 110rpx;
        .f-board {
          width: 100%;
          flex-wrap: nowrap;
          overflow: hidden;
          height: inherit;
          &:-webkit-scrollbar {
            width: 0 !important;
          }
          .f-b-imgw {
            width: 96rpx;
            height: 96rpx;
            margin-right: 16rpx;
            border-radius: 48rpx;
            padding: 8rpx;
            box-sizing: border-box;
            margin-right: 30rpx;
            position: relative;
            overflow: visible;
            flex-shrink: 0;
            &.f-b-imgw-boy {
              background: #e9f8ff;
            }
            &.f-b-imgw-girl {
              background: #ffefef;
            }
            .f-b-img-header {
              width: 100%;
              height: 100%;
              border-radius: inherit;
            }
            .f-b-img-icon {
              position: absolute;
              bottom: -16rpx;
              width: 80rpx;
              height: 32rpx;
              left: 50%;
              transform: translateX(-50%);
            }
          }
          .f-b-t {
            color: rgba(0, 0, 0, 0.55);
            font-size: 32rpx;
            word-break: keep-all;
            height: 64rpx;
            line-height: 64rpx;
          }
        }
        .f-b-inner {
          display: flex;
          height: 130rpx;
          overflow-y: hidden;
          padding-bottom: 20rpx;
        }
      }
      .f-num {
        color: rgba(0, 0, 0, 0.55);
        font-size: 32rpx;
        word-break: keep-all;
        height: 64rpx;
        line-height: 64rpx;

        .f-num-bold {
          font-weight: bold;
          color: black;
        }
      }
      .f-des {
        font-size: 36rpx;
        color: rgba(0, 0, 0, 0.9);
        text-align: center;
        margin-top: 10rpx;
        font-weight: 600;
        .f-des-bold {
          color: #eb2028;
          font-size: 60rpx;
          font-weight: bold;
        }
      }
      .f-btn-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10rpx;
        .f-btn {
          width: 300rpx;
          height: 72rpx;
          line-height: 72rpx;
          background: linear-gradient(to left, #10aeff 0%, #2680eb 100%);

          border-radius: 36rpx;
          color: #fff;
          font-size: 32rpx;
          text-align: center;
          margin: 20rpx auto;
          &.f-btn-orange {
            background: linear-gradient(236deg, #fe894d 0%, #ef3931 100%);
          }
        }
      }
    }
    .tab {
      @include itemCustomStyle;
      height: 136rpx;
      padding: 16rpx 0 20rpx;
      justify-content: space-around;
      background: white;
      .tab-item {
        width: 25%;
        height: 100%;
        text-align: center;
        .tab-item-img {
          width: 64rpx;
          height: 64rpx;
          margin: auto;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .tab-item-txt {
          margin-top: 6rpx;
          font-size: 26rpx;
          color: rgba(0, 0, 0, 0.9);
        }
      }
    }
    .get-banner {
      @include itemCustomStyle;

      padding: 20rpx;
      justify-content: space-between;
      align-items: center;
      background: white;
      .g-b-imgwrap {
        width: 96rpx;
        height: 96rpx;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .g-b-txt {
        width: 400rpx;
        .g-b-t1 {
          color: rgba(0, 0, 0, 0.9);
          font-weight: bold;
          font-size: 32rpx;
        }
        .g-b-t2 {
          color: rgba(0, 0, 0, 0.55);
          font-size: 24rpx;
        }
      }
      .g-b-btn {
        width: 136rpx;
        height: 56rpx;
        line-height: 56rpx;
        text-align: center;
        background: #fdf2f1;
        color: #f34e1c;
        font-size: 24rpx;
        border-radius: 28rpx;
      }
    }
    .plan {
      @include itemCustomStyle;
      padding: 28rpx 24rpx 32rpx;
      height: 424rpx;
      display: block;
      background: white;
      .plan-title {
        font-size: 32rpx;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.9);
      }
      .plan-swiper {
        margin-top: 16rpx;
        width: 654rpx;
        height: 296rpx;
        border-radius: 16rpx;
        overflow: hidden;
      }
      .plan-img {
        width: 100%;
        height: 100%;
        position: relative;
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }
    .know {
      @include itemCustomStyle;
      padding: 28rpx 24rpx 32rpx;
      display: block;
      background: white;
      .k-title {
        font-size: 32rpx;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.9);
      }
      .class-title {
        position: relative;
        font-weight: bold;
        .class-more {
          position: absolute;
          right: 40rpx;
          top: 0;
          font-size: 24rpx;
          color: #b2b2b2;
        }
        .class-right {
          position: absolute;
          right: 0rpx;
          top: -0rpx;
          img {
            width: 40rpx;
            height: 40rpx;
          }
        }
      }
      .k-swiper {
        margin-top: 16rpx;
        border-radius: 16rpx;
        overflow: hidden;
        .k-img {
          width: 654rpx;
          height: 296rpx;
          position: relative;
          image {
            width: 100%;
            height: 100%;
            object-fit: contain;
          }
          .k-img-btn {
            width: 136rpx;
            height: 56rpx;
            line-height: 56rpx;
            background: linear-gradient(186deg, #fe894d 0%, #ef3931 100%);
            text-align: center;
            font-size: 24rpx;
            color: white;
            border-radius: 24rpx;
            position: absolute;
            bottom: 24rpx;
            left: 24rpx;
          }
        }
      }
      .k-item-wrap {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 24rpx;
        .k-item {
          width: 316rpx;
          align-items: center;
          position: relative;
          .k-logo {
            width: 316rpx;
            height: 142rpx;
            image {
              width: 100%;
              height: 100%;
            }
          }
          .k-des {
            margin-top: 24rpx;
            text-align: left;
            font-size: 32rpx;
            color: rgba(0, 0, 0, 0.9);
          }
        }
      }

      .k-btn {
        margin-top: 24rpx;
        text-align: center;
        font-size: 28rpx;
        color: rgba(38, 128, 235, 1);
      }
      .classList {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .list {
          width: 316rpx;
          height: auto;
          margin: 20rpx 0 10rpx 0;
          .images {
            width: 100%;
            text-align: center;
            img {
              width: 100%;
              height: 180rpx;
              max-width: 100%;
            }
          }
          .name {
            font-size: 28rpx;
            display: -webkit-box;
            text-overflow: ellipsis;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
        }
        .clear {
          clear: both;
          overflow: hidden;
          height: 0;
        }
      }
    }
    .rescue {
      @include itemCustomStyle;
      display: block;
      height: 668rpx;
      background: white;
      .re-1 {
        padding: 40rpx 24rpx 0rpx;
        width: 100%;
        height: 236rpx;
        box-sizing: border-box;
        background-image: url('https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/rescue.png');
        background-repeat: no-repeat;
        background-size: contain;
        .re-1-title {
          font-size: 32rpx;
          font-weight: bold;
          color: rgba(0, 0, 0, 0.9);
          line-height: 32rpx;
        }
        .re-1-con {
          display: flex;
          flex-grow: 1;
          justify-content: space-between;
          margin-top: 48rpx;
          .re-item {
            width: 33%;
            text-align: left;
            .re-1-num {
              color: #4985e9;
              font-size: 36rpx;
              line-height: 36rpx;
              font-weight: 500;
            }
            .re-1-txt {
              margin-top: 16rpx;
              font-size: 26rpx;
              font-weight: 400;
              color: rgba(0, 0, 0, 0.55);
            }
          }
          .re-btn {
            width: 136rpx;
            height: 56rpx;
            line-height: 56rpx;
            // background: linear-gradient(186deg, #61b8fa 0%, #4883e9 100%);
            text-align: center;
            font-size: 24rpx;
            color: white;
            border-radius: 56rpx;
          }
        }
      }
      .re-2 {
        padding: 40rpx 0rpx 48rpx;
        overflow: hidden;
        background: white;
        .re-2-title {
          text-align: center;
          height: 32rpx;
          color: rgba(0, 0, 0, 0.9);
          font-weight: 400;
          display: flex;
          align-items: center;
          justify-content: center;

          .re-2-title-lineLeft,
          .re-2-title-lineRight {
            width: 70rpx;
            height: 10rpx;
            background-image: url('https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/t-dash.png');
          }
          .re-2-title-lineLeft {
            margin-right: 16rpx;
          }
          .re-2-title-lineRight {
            transform: rotate(180deg);
            margin-left: 16rpx;
          }
        }
        .re-2-mem {
          &.re-2-mem {
            margin-left: -4px;
          }
          &.re-2-mem1 {
            margin-top: 40rpx;
          }
          &.re-2-mem2 {
            margin-top: 16rpx;
            margin-left: -60rpx;
          }
          .re-2-mem-inner {
            display: flex;
            .re-2-mem-img {
              flex-shrink: 0;
              width: 128rpx;
              height: 128rpx;
              border-radius: 16rpx;
              margin: 0rpx 4rpx;
              overflow: hidden;
              transform: translateZ(0);
              will-change: width;
              &.active {
                background: #61b8fa;
              }

              &.widthBigger {
                animation: widthBigger 1s linear 1;
              }
              .scaleBigger {
                animation: scaleBigger 1s linear 1;
              }

              image {
                width: 100%;
                height: 100%;
                transform: translateZ(0);
                will-change: transform;
                background: linear-gradient(236deg, #fe894d 0%, #ef3931 100%);
              }
            }
          }
        }
      }
    }
    .donate {
      @include itemCustomStyle;
      display: block;
      height: 516rpx;

      .re-1 {
        padding: 40rpx 24rpx 0rpx;
        width: 100%;
        height: 236rpx;
        box-sizing: border-box;
        background-image: url('https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/help.png');
        background-repeat: no-repeat;
        background-size: contain;
        .re-1-title {
          font-size: 32rpx;
          font-weight: bold;
          color: rgba(0, 0, 0, 0.9);
          line-height: 32rpx;
        }
        .re-1-con {
          display: flex;
          flex-grow: 1;
          justify-content: space-between;
          margin-top: 48rpx;
          .re-item {
            width: 33%;
            text-align: left;
            .re-1-num {
              color: #c8161d;
              font-size: 36rpx;
              line-height: 36rpx;
              font-weight: 500;
            }
            .re-1-txt {
              margin-top: 16rpx;
              font-size: 26rpx;
              font-weight: 400;
              color: rgba(0, 0, 0, 0.55);
            }
          }
          .re-btn {
            width: 136rpx;
            height: 56rpx;
            line-height: 56rpx;
            background: linear-gradient(186deg, #fe894d 0%, #ef3931 100%);
            text-align: center;
            font-size: 24rpx;
            color: white;
            border-radius: 56rpx;
          }
        }
      }
      .re-2 {
        text-align: center;

        color: rgba(0, 0, 0, 0.9);
        font-weight: 400;
        padding: 40rpx 24rpx 48rpx;
        background: white;
        .re-2-title {
          display: flex;
          align-items: center;
          justify-content: center;
          .re-2-title-lineLeft,
          .re-2-title-lineRight {
            width: 70rpx;
            height: 10rpx;
            background-image: url('https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/t-dash.png');
          }
          .re-2-title-lineLeft {
            margin-right: 16rpx;
          }
          .re-2-title-lineRight {
            transform: rotate(180deg);
            margin-left: 16rpx;
          }
        }
        .donate-swiper {
          width: 100%;
          height: 120rpx;
          margin-top: 32rpx;
          pointer-events: none;
          .donate-swiper-item {
            .donate-item {
              &.donate-item1 {
                margin-bottom: 8rpx;
              }
              width: 100%;
              height: 56rpx;
              line-height: 56rpx;
              background: #fce6e5;
              border-radius: 30rpx;
              padding: 0rpx 26rpx;
              color: rgba(0, 0, 0, 0.55);
              box-sizing: border-box;
              font-size: 28rpx;
              text-align: left;
              display: flex;
              align-items: center;
              word-break: keep-all;
              .do-i-logo {
                width: 50rpx;
                height: 100%;
                margin-right: 8rpx;
                image {
                  width: 32rpx;
                  height: 32rpx;
                  object-fit: contain;
                  margin-top: 12rpx;
                }
              }
              .do-i-name {
                min-width: 90rpx;
                text-align: left;
                word-break: keep-all;
              }
              .do-i-m-wrap {
                width: 370rpx;
                word-break: keep-all;
                overflow: hidden;
                display: flex;
                align-items: center;
                .do-i-money {
                  font-weight: bold;
                }
              }
              .do-i-date {
                margin-left: 10rpx;
                word-break: keep-all;
              }
            }
          }
        }
      }
    }
    .room {
      @include itemCustomStyle;
      display: block;
      padding: 28rpx 24rpx;
      background: white;
      .re-1 {
        .re-1-title {
          font-size: 32rpx;
          font-weight: bold;
          color: rgba(0, 0, 0, 0.9);
        }
      }
      .r-video {
        width: 100%;
        height: 366rpx;
        border-radius: 24rpx;
        margin-top: 16rpx;
        img,
        video {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
      .palybill {
        width: 100%;
        margin-top: 24rpx;
        display: flex;
        overflow-x: scroll;
        overflow-y: hidden;
        .v-item {
          background: #f9f9f9;
          width: 360rpx;
          padding: 32rpx 24rpx;
          display: inline-block;
          margin-right: 24rpx;
          .v-i-que {
            font-size: 32rpx;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.9);
          }
          .v-i-ans {
            width: 372rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.55);
          }
          .v-i-icon {
            width: 32rpx;
            height: 32rpx;
            border-radius: 32rpx;
            background: #fae7e8;
            color: #c8161d;
            text-align: center;
            line-height: 32rpx;
            font-size: 24rpx;
            margin-right: 8rpx;
          }
        }
      }
    }
    .hkey {
      @include itemCustomStyle;
      display: block;
      height: 288rpx;
      padding: 28rpx 24rpx;
      background: white;
      .re-1 {
        .re-1-title {
          font-size: 32rpx;
          font-weight: bold;
          color: rgba(0, 0, 0, 0.9);
          line-height: 32rpx;
        }
      }
      .hkey-cont {
        margin-top: 16rpx;
        display: flex;
        justify-content: space-between;
        .hk-item {
          text-align: center;
          .hk-logo {
            width: 88rpx;
            height: 88rpx;
            margin: auto;
            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }
          .hk-name {
            font-size: 24rpx;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.9);
          }
        }
      }
    }
    .support {
      @include itemCustomStyle;
      display: block;
      padding: 40rpx 24rpx;
      background: white;
      .re-1 {
        .re-1-title {
          font-size: 32rpx;
          font-weight: bold;
          color: rgba(0, 0, 0, 0.9);
          line-height: 32rpx;
        }
      }
      .s-des {
        margin-top: 24rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.55);
        line-height: 40rpx;
      }
    }
    .footer {
      margin-top: 60rpx;
      margin-bottom: 60rpx;
      .f-partner {
        display: flex;
        align-items: center;
        justify-content: space-around;
        .whLogo {
          width: 160rpx;
          height: 60rpx;
          margin-left: 40rpx;
        }
        .aeLogo {
          width: 254rpx;
          height: 52rpx;
          margin-right: 40rpx;
        }
      }
      .f-title {
        margin-top: 30rpx;
        text-align: center;
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.3);
        margin-bottom: 60rpx;
      }
    }
  }
  .pickFamily {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100;
    top: 0px;
    left: 0px;
    overflow: scroll;
    background: rgba(0, 0, 0, 0.7);
    .pf-mask {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    .pf-cont {
      height: 80%;
      position: absolute;
      top: calc(50% + 42rpx); // 12rpx为高度的一般
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      width: 654rpx;
      padding: 120rpx 40rpx 32rpx;
      box-sizing: border-box;
      background: white;
      border-radius: 24rpx;
      // height: calc(100% - 124rpx);
      // padding-bottom:144rpx;
      .pf-close {
        position: absolute;
        width: 48rpx;
        height: 48rpx;
        top: 12px;
        right: 12px;
      }
      .pf-icon {
        width: 176rpx;
        height: 176rpx;
        position: absolute;
        top: -76rpx;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: white;

        .pf-inner {
          width: 144rpx;
          height: 144rpx;
          border: 1px solid rgba(0, 0, 0, 0);
          background: linear-gradient(146deg, #fe894d 0%, #ef3931 100%);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          .pf-bell {
            width: 72rpx;
            height: 72rpx;
            background-image: url('https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/bell.png');
            background-size: 100%;
            background-repeat: no-repeat;
          }
        }
      }
      .pf-active {
        overflow-y: scroll;
        height: 100%;
      }
      .pf-title {
        font-size: 36rpx;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.9);
      }

      .pf-item {
        margin-top: 32rpx;
        width: 574rpx;
        height: 144rpx;
        background: #feede7;
        border-radius: 16rpx;
        box-sizing: border-box;
        padding: 32rpx 40rpx;
        color: #f25559;
        position: relative;
        &.active {
          color: #2680eb;
          border: 1px solid #f1453f;
        }
        .pf-name {
          font-size: 32rpx;
          height: 30rpx;
          line-height: 30rpx;
        }
        .pf-pro {
          font-size: 28rpx;
          font-weight: bold;
          height: 40rpx;
          line-height: 40rpx;
          margin-top: 12rpx;
        }
        .pf-checked-icon {
          position: absolute;
          bottom: 0;
          right: 0;
          background-image: url('~@/static/index/checked.png');
          background-size: 48rpx 48rpx;
          background-repeat: no-repeat;
          width: 48rpx;
          height: 48rpx;
        }
      }
      .pf-btn {
        margin-top: 64rpx;
        text-align: center;
        width: 100%;
        height: 88rpx;
        background: linear-gradient(236deg, #fe894d 0%, #ef3931 100%);
        border-radius: 44rpx;
        font-size: 36rpx;
        line-height: 88rpx;
        color: white;
        // position: absolute;
        // bottom:24rpx;
      }
    }
  }
}

.unLogin {
  text-align: center;
  width: 700rpx;
  border-radius: 24rpx;
  margin-top: 24rpx;
  background-size: contain;
  background-repeat: no-repeat;
  box-sizing: border-box;
  padding: 24rpx;
  background: white;
  .img {
    text-align: center;
    padding: 24rpx;
    img {
      width: 448rpx;
      height: 174rpx;
    }
  }
  .loginBtn {
    color: #fff;
    font-size: 32rpx;
    span {
      display: inline-block;
      width: 300rpx;
      height: 72rpx;
      line-height: 72rpx;
      background: -webkit-linear-gradient(right, #10aeff 0%, #2680eb 100%);
      background: linear-gradient(to left, #10aeff 0%, #2680eb 100%);
      border-radius: 36rpx;
      color: #fff;
      font-size: 32rpx;
      text-align: center;
      margin: 20rpx auto;
    }
  }
}
.class-title {
  position: relative;
  font-weight: bold;
  .class-more {
    position: absolute;
    right: 40rpx;
    top: 0;
    font-size: 24rpx;
    color: #b2b2b2;
  }
  .class-right {
    position: absolute;
    right: 0rpx;
    top: -0rpx;
    img {
      width: 40rpx;
      height: 40rpx;
    }
  }
}
@keyframes widthBigger {
  from {
    width: 0px;
  }
  to {
    width: 128rpx;
  }
}
@keyframes scaleBigger {
  from {
    -webkit-transform: scale(0.1) translateZ(0);
    transform: scale(0.1) translateZ(0);
  }
  to {
    -webkit-transform: scale(1) translateZ(0);
    transform: scale(1) translateZ(0);
  }
}

.f-btn {
  width: 300rpx;
  height: 72rpx;
  line-height: 72rpx;
  background: linear-gradient(to left, #10aeff 0%, #2680eb 100%);

  border-radius: 36rpx;
  color: #fff;
  font-size: 32rpx;
  text-align: center;
  margin: 20rpx auto;
  &.f-btn-orange {
    background: linear-gradient(236deg, #fe894d 0%, #ef3931 100%);
  }
}
</style>
